<template>
  <div id="Goods">
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
   <div class="search">
    <el-input placeholder="请输入内容"  class="input-with-select" clearable v-model="queryInfo.query" @clear="getGoodsList">
      <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
    </el-input>
      <el-button type="primary" class="btn" @click="btnShop">添加商品</el-button>
  </div>
  <!-- 表格区 -->
  <el-table
  border
    :data="goodsList"
    style="width: 100%;margin:10px 0">
    <el-table-column
      type="index"
      label="#"
       width="60"
    >
    </el-table-column>
   <el-table-column
      property="goods_name"
      label="商品名称"
       width="640"
     >
    </el-table-column>
     <el-table-column
      property="goods_price"
      label="商品价格(元)"
     >
    </el-table-column>
     <el-table-column
      property="goods_weight"
      label="商品重量"
     >
    </el-table-column>
  
     <el-table-column
      property="add_time"
      label="创建时间"
       width="400"
     >
      <template slot-scope="scope">
        {{scope.row.add_time | dateFormat}}
     </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- enterable方法提示文字离开隐藏 -->
          <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button type="primary"  size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"></el-button>
           </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区 -->
 <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 5, 10, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
  </div>

</el-card>
 <!-- 弹出修改用户对话框 -->
<el-dialog title="修改商品" :visible.sync="editFormVisible">
  <!-- <el-form :model="editForm" class="demo-ruleForm" :rules="rules" ref="ruleFormEdit" label-width="100px">
    <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
    <el-input v-model="editForm.username" :disabled="true"></el-input>
  </el-form-item>
   <el-form-item
    prop="email"
    label="邮箱"
    :label-width="formLabelWidth"
  >
    <el-input v-model="editForm.email"></el-input>
  </el-form-item>
    <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
      <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
    </el-form-item>
  </el-form> -->
  <div slot="footer" class="dialog-footer">
    <el-button @click="offEdit">取 消</el-button>
    <el-button type="primary" @click="sureEdit">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      goodsList:[],
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:5,
      },
      total:0,
      dialogFormVisible:false,
      editFormVisible:false
    }
  },
  created(){
    this.getGoodsList()
  },
  methods:{
    async getGoodsList(){
      const {data:res}=await this.$http.get(`goods`,{params:this.queryInfo})
      if(res.meta.status!==200){
        return this.$message.error('获取商品列表失败')
      }
      this.goodsList=res.data.goods
      this.total=res.data.total
    },
    handleSizeChange(val){
      this.queryInfo.pagesize=val
      this.getGoodsList()
    },
    handleCurrentChange(val){
       this.queryInfo.pagenum=val
        this.getGoodsList()
    },
    btnShop(){
     this.$router.push('/goods/add')
    },
    handleEdit(){
      this.editFormVisible=true
    },

    handleDelete(index,row){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { data:res }=await this.$http.delete(`goods/${row.goods_id}`)
          if(res.meta.status === 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getGoodsList()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
}
</script>

<style lang="less" scoped>
#Goods{
  .box-card{
    margin: 20px 0;
    .search{
      .el-input-group{
        width: 20%;
      }
      .btn{
        margin-left: 25px;
      }
    }
  }
}
</style>